Skip to content

test(react-query-devtools/ReactQueryDevtools{,Panel}): add tests for the full prop wiring matrix#10851

Merged
sukvvon merged 2 commits into
mainfrom
test/react-query-devtools-mirror-solid-wiring-matrix
Jun 1, 2026
Merged

test(react-query-devtools/ReactQueryDevtools{,Panel}): add tests for the full prop wiring matrix#10851
sukvvon merged 2 commits into
mainfrom
test/react-query-devtools-mirror-solid-wiring-matrix

Conversation

@sukvvon
Copy link
Copy Markdown
Collaborator

@sukvvon sukvvon commented Jun 1, 2026

🎯 Changes

Add test cases to both ReactQueryDevtools and ReactQueryDevtoolsPanel that cover the full prop wiring matrix, mirroring the matrix already in place for SolidQueryDevtools (#10823, #10824) and SolidQueryDevtoolsPanel (#10827, #10828).

ReactQueryDevtools

  • initialIsOpensetInitialIsOpen + default (false when omitted)
  • errorTypessetErrorTypes + default ([] when omitted)
  • themesetTheme
  • resolved QueryClientsetClient
  • constructor-only props (styleNonce, shadowDOMTarget, hideDisabledQueries)
  • unmount cleanup

ReactQueryDevtoolsPanel

  • onClosesetOnClose + default (no-op function when omitted)
  • errorTypessetErrorTypes + default
  • themesetTheme
  • resolved QueryClientsetClient
  • constructor-only props (styleNonce, shadowDOMTarget, hideDisabledQueries)
  • style merge contract (preserve default and override on conflict)
  • unmount cleanup

All cases follow the existing mock pattern (`vi.mock('@tanstack/query-devtools', ...)` with per-method spies), and style cases use `toHaveStyle` from @testing-library/jest-dom.

✅ Checklist

  • I have followed the steps in the Contributing guide.
  • I have tested this code locally with `pnpm run test:pr`.

🚀 Release Impact

  • This change affects published code, and I have generated a changeset.
  • This change is docs/CI/dev-only (no release).

Summary by CodeRabbit

  • Tests
    • Expanded test coverage for React Query Devtools components, including validation of prop forwarding, default values, and component lifecycle management.

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Jun 1, 2026

Review Change Stack

📝 Walkthrough

Walkthrough

Test coverage for React Query Devtools wrapper components (ReactQueryDevtools and ReactQueryDevtoolsPanel) is expanded by changing both imports from type-only to runtime values, then adding comprehensive test cases that verify prop forwarding, default values, and lifecycle behavior when delegating to underlying TanStack devtools instances.

Changes

DevTools Wrapper Test Coverage

Layer / File(s) Summary
ReactQueryDevtools wrapper test coverage
packages/react-query-devtools/src/__tests__/ReactQueryDevtools.test.tsx
Import TanstackQueryDevtools as a runtime value to enable mock assertions. Add tests verifying initialIsOpen, errorTypes (defaulting to []), theme, styleNonce, shadowDOMTarget, and hideDisabledQueries are forwarded with correct defaults, QueryClient is passed via setClient, and unmount is called on component teardown.
ReactQueryDevtoolsPanel wrapper test coverage
packages/react-query-devtools/src/__tests__/ReactQueryDevtoolsPanel.test.tsx
Import TanstackQueryDevtoolsPanel as a runtime value for mock assertions. Add tests verifying onClose (defaulting to no-op), errorTypes (defaulting to []), theme, styleNonce, shadowDOMTarget, and hideDisabledQueries are forwarded, QueryClient reaches the instance via setClient, container height respects style overrides, and unmount is called on unmount.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

  • TanStack/query#10817: Extends ReactQueryDevtools.test.tsx to assert that ReactQueryDevtools forwards specific props to the underlying devtools instance via its set*/constructor wiring.
  • TanStack/query#10823: Extends devtools test suites to assert prop-to-setter wiring for initialIsOpen, errorTypes, theme, plus setClient and unmount lifecycle behavior.
  • TanStack/query#10824: Adds test assertions that SolidQueryDevtools forwards specific DevtoolsOptions props to the underlying TanstackQueryDevtools instance and verifies resulting setter calls and unmount behavior.

Suggested labels

package: query-devtools

Poem

🐰 whiskers twitch with test delight,
props forwarding: checked just right!
defaults dance and unmounts call,
devtools wired—we test them all!

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately describes the main change: adding comprehensive prop wiring tests for both ReactQueryDevtools and ReactQueryDevtoolsPanel components.
Description check ✅ Passed The description comprehensively covers the changes with clear sections detailing what tests were added for each component, their coverage areas, and testing methodology.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch test/react-query-devtools-mirror-solid-wiring-matrix

Comment @coderabbitai help to get the list of available commands and usage tips.

@nx-cloud
Copy link
Copy Markdown

nx-cloud Bot commented Jun 1, 2026

View your CI Pipeline Execution ↗ for commit e10e9f9

Command Status Duration Result
nx affected --targets=test:sherif,test:knip,tes... ✅ Succeeded 3m 3s View ↗
nx run-many --target=build --exclude=examples/*... ✅ Succeeded 6s View ↗

☁️ Nx Cloud last updated this comment at 2026-06-01 01:29:15 UTC

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Jun 1, 2026

🚀 Changeset Version Preview

2 package(s) bumped directly, 23 bumped as dependents.

🟩 Patch bumps

Package Version Reason
@tanstack/lit-query 0.2.6 → 0.2.7 Changeset
@tanstack/query-devtools 5.100.14 → 5.100.15 Changeset
@tanstack/angular-query-experimental 5.100.14 → 5.100.15 Dependent
@tanstack/angular-query-persist-client 5.100.14 → 5.100.15 Dependent
@tanstack/eslint-plugin-query 5.100.14 → 5.100.15 Dependent
@tanstack/preact-query 5.100.14 → 5.100.15 Dependent
@tanstack/preact-query-devtools 5.100.14 → 5.100.15 Dependent
@tanstack/preact-query-persist-client 5.100.14 → 5.100.15 Dependent
@tanstack/query-async-storage-persister 5.100.14 → 5.100.15 Dependent
@tanstack/query-broadcast-client-experimental 5.100.14 → 5.100.15 Dependent
@tanstack/query-core 5.100.14 → 5.100.15 Dependent
@tanstack/query-persist-client-core 5.100.14 → 5.100.15 Dependent
@tanstack/query-sync-storage-persister 5.100.14 → 5.100.15 Dependent
@tanstack/react-query 5.100.14 → 5.100.15 Dependent
@tanstack/react-query-devtools 5.100.14 → 5.100.15 Dependent
@tanstack/react-query-next-experimental 5.100.14 → 5.100.15 Dependent
@tanstack/react-query-persist-client 5.100.14 → 5.100.15 Dependent
@tanstack/solid-query 5.100.14 → 5.100.15 Dependent
@tanstack/solid-query-devtools 5.100.14 → 5.100.15 Dependent
@tanstack/solid-query-persist-client 5.100.14 → 5.100.15 Dependent
@tanstack/svelte-query 6.1.33 → 6.1.34 Dependent
@tanstack/svelte-query-devtools 6.1.33 → 6.1.34 Dependent
@tanstack/svelte-query-persist-client 6.1.33 → 6.1.34 Dependent
@tanstack/vue-query 5.100.14 → 5.100.15 Dependent
@tanstack/vue-query-devtools 6.1.33 → 6.1.34 Dependent

@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented Jun 1, 2026

More templates

@tanstack/angular-query-experimental

npm i https://pkg.pr.new/@tanstack/angular-query-experimental@10851

@tanstack/eslint-plugin-query

npm i https://pkg.pr.new/@tanstack/eslint-plugin-query@10851

@tanstack/lit-query

npm i https://pkg.pr.new/@tanstack/lit-query@10851

@tanstack/preact-query

npm i https://pkg.pr.new/@tanstack/preact-query@10851

@tanstack/preact-query-devtools

npm i https://pkg.pr.new/@tanstack/preact-query-devtools@10851

@tanstack/preact-query-persist-client

npm i https://pkg.pr.new/@tanstack/preact-query-persist-client@10851

@tanstack/query-async-storage-persister

npm i https://pkg.pr.new/@tanstack/query-async-storage-persister@10851

@tanstack/query-broadcast-client-experimental

npm i https://pkg.pr.new/@tanstack/query-broadcast-client-experimental@10851

@tanstack/query-core

npm i https://pkg.pr.new/@tanstack/query-core@10851

@tanstack/query-devtools

npm i https://pkg.pr.new/@tanstack/query-devtools@10851

@tanstack/query-persist-client-core

npm i https://pkg.pr.new/@tanstack/query-persist-client-core@10851

@tanstack/query-sync-storage-persister

npm i https://pkg.pr.new/@tanstack/query-sync-storage-persister@10851

@tanstack/react-query

npm i https://pkg.pr.new/@tanstack/react-query@10851

@tanstack/react-query-devtools

npm i https://pkg.pr.new/@tanstack/react-query-devtools@10851

@tanstack/react-query-next-experimental

npm i https://pkg.pr.new/@tanstack/react-query-next-experimental@10851

@tanstack/react-query-persist-client

npm i https://pkg.pr.new/@tanstack/react-query-persist-client@10851

@tanstack/solid-query

npm i https://pkg.pr.new/@tanstack/solid-query@10851

@tanstack/solid-query-devtools

npm i https://pkg.pr.new/@tanstack/solid-query-devtools@10851

@tanstack/solid-query-persist-client

npm i https://pkg.pr.new/@tanstack/solid-query-persist-client@10851

@tanstack/svelte-query

npm i https://pkg.pr.new/@tanstack/svelte-query@10851

@tanstack/svelte-query-devtools

npm i https://pkg.pr.new/@tanstack/svelte-query-devtools@10851

@tanstack/svelte-query-persist-client

npm i https://pkg.pr.new/@tanstack/svelte-query-persist-client@10851

@tanstack/vue-query

npm i https://pkg.pr.new/@tanstack/vue-query@10851

@tanstack/vue-query-devtools

npm i https://pkg.pr.new/@tanstack/vue-query-devtools@10851

commit: 0aa423f

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Jun 1, 2026

size-limit report 📦

Path Size
react full 12.11 KB (0%)
react minimal 9.08 KB (0%)

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
packages/react-query-devtools/src/__tests__/ReactQueryDevtoolsPanel.test.tsx (1)

66-75: 💤 Low value

Consider strengthening the onClose assertion.

The test creates a mock onClose function but only verifies that some function was passed to setOnCloseMock, not that the specific onClose prop was forwarded. If the wrapper passes through the function unchanged, you could assert the exact reference. If the wrapper adds logic around onClose, consider testing that invoking the function passed to setOnCloseMock actually calls the original onClose.

♻️ Option 1: Assert exact function if no wrapping occurs
-  expect(setOnCloseMock).toHaveBeenCalledWith(expect.any(Function))
+  expect(setOnCloseMock).toHaveBeenCalledWith(onClose)
♻️ Option 2: Test behavior if wrapping occurs
   expect(setOnCloseMock).toHaveBeenCalledWith(expect.any(Function))
+  
+  // Verify the passed function invokes the original onClose
+  const passedFunction = setOnCloseMock.mock.calls[0][0]
+  passedFunction()
+  expect(onClose).toHaveBeenCalled()
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/react-query-devtools/src/__tests__/ReactQueryDevtoolsPanel.test.tsx`
around lines 66 - 75, The test currently only asserts that setOnCloseMock
received some function; update it to verify the actual onClose behavior: after
rendering ReactQueryDevtoolsPanel with the onClose mock, grab the function
passed into setOnCloseMock (e.g., const passed =
setOnCloseMock.mock.calls[0][0]) and either assert reference equality with the
original onClose (expect(passed).toBe(onClose)) if the prop should be forwarded
unchanged, or invoke passed() and assert the original onClose mock was called
(passed(); expect(onClose).toHaveBeenCalled()) if the wrapper is expected to
wrap the handler; locate these in the ReactQueryDevtoolsPanel test where
QueryClient, onClose, render, and setOnCloseMock are used.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In
`@packages/react-query-devtools/src/__tests__/ReactQueryDevtoolsPanel.test.tsx`:
- Around line 66-75: The test currently only asserts that setOnCloseMock
received some function; update it to verify the actual onClose behavior: after
rendering ReactQueryDevtoolsPanel with the onClose mock, grab the function
passed into setOnCloseMock (e.g., const passed =
setOnCloseMock.mock.calls[0][0]) and either assert reference equality with the
original onClose (expect(passed).toBe(onClose)) if the prop should be forwarded
unchanged, or invoke passed() and assert the original onClose mock was called
(passed(); expect(onClose).toHaveBeenCalled()) if the wrapper is expected to
wrap the handler; locate these in the ReactQueryDevtoolsPanel test where
QueryClient, onClose, render, and setOnCloseMock are used.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 1f7bddc7-dacb-4f55-a85a-fd9e03952461

📥 Commits

Reviewing files that changed from the base of the PR and between 9d488a1 and 0aa423f.

📒 Files selected for processing (2)
  • packages/react-query-devtools/src/__tests__/ReactQueryDevtools.test.tsx
  • packages/react-query-devtools/src/__tests__/ReactQueryDevtoolsPanel.test.tsx

@sukvvon sukvvon merged commit 2d27c4e into main Jun 1, 2026
9 checks passed
@sukvvon sukvvon deleted the test/react-query-devtools-mirror-solid-wiring-matrix branch June 1, 2026 01:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant